<template>
    <div class="login-wrap">

        <div>

        <div class="ms-login">
            <div class="wel1">
                     <span>建德市投资项目智能管理系统</span>
            </div>
            <br><br><br><br>
            <div class="ms-title" style="float:right;">
                <div class="EWM"> </div>
                <br>
            <div class="wel">
                     <span   @click="password" v-bind:class="{ password: ys1 ,message: ys2}">密码登录</span>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <span   @click="message" v-bind:class="{ message: ys1,password: ys2 }">短信登录</span>
            </div>

            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content" v-show="is_password">
                <el-form-item prop="username">
                     <el-input
                    v-model="param.username"
                    suffix-icon="el-icon-lx-people"
                    placeholder="用户名"
                    class="input"
                    >
                        <!-- <el-button slot="prepend" icon="el-icon-lx-people" ></el-button> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        placeholder="密码"
                        suffix-icon="el-icon-lx-lock"
                        v-model="param.password"
                        @keyup.enter.native="submitForm()"
                        class="input"
                    >
                        <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
                    </el-input>
                </el-form-item>

                <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
            </el-form>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content" v-show="is_massage">
                <el-form-item prop="username">
                     <el-input
                    v-model="param.username"
                    suffix-icon="el-icon-phone-outline"
                    placeholder="手机号"
                    class="input">
                        <!-- <el-button slot="prepend" icon="el-icon-lx-people" ></el-button> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        placeholder="验证码"
                        suffix-icon="el-icon-reading"
                        v-model="param.password"
                        @keyup.enter.native="submitForm()"
                        class="input"
                    >
                        <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
                    </el-input>
                </el-form-item>

                <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
            </el-form>
            <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登&nbsp;录</el-button>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5'
export default {
    data: function() {
        return {
            param: {
                username: '',
                password: '',
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            is_password: true,
            is_massage: false,
            ys1: true,
            ys2: false
        };
    },
    methods: {
        submitForm() {
            // console.log(md5.hex('a'))
            // localStorage.setItem('ms_username', this.param.username);
            // this.$router.push('/');


            this.$post('/sysManage/user/login', {
                userName: this.param.username,
                passWord: md5.hex(this.param.password+'cierphantomhive')

            }).then((res) => {
                if(res.code == 2000){
                this.$message.success('登录成功!')
                localStorage.setItem('ms_username', this.param.username)
                localStorage.setItem('jdGov', res.data)
                this.$post('/sysManage/user/test')

                this.$router.push({
                    path: '/'
                })
                }else if(res.code == 4000){

                    this.$message.error(res.message)


                }
            })


            // this.$refs.login.validate(valid => {
            //     if (valid) {
            //         this.$post('/sysManage/user/login/' + this.param.username + '/' + this.param.password).then((res) => {
            //             if (res.code == 2000){
            //                 console.log(res.data);
            //                 // $.ajax({
            //                 //     type:'GET',
            //                 //     url:'/sysManage/user/test',
            //                 //     beforeaSend:function(resquest){
            //                 //         resquest.setRequestHeader('Authorization',res.data);
            //                 //         alert('11')
            //                 //         console.log(resquest)
            //                 //     },
            //                 //     success:function(result){
            //                 //         alert('22')
            //                 //         console.log(result.data)
            //                 //     }
            //                 // })
            //                 this.$message.success('登录成功');
            //                 localStorage.setItem('ms_username', this.param.username);
            //                 this.$router.push('/');
            //             }else{
            //                 this.$message.error('用户名或密码错误，请重新登录！');
            //             }
            //         });
            //     } else {
            //         this.$message.error('请输入账号和密码');
            //         console.log('error submit!!');
            //         return false;
            //     }
            // });
        },
        password(){
            this.is_massage=false
            this.is_password=true
            this.ys1 = !this.ys1
            this.ys2 = !this.ys2
        },
        message(){
            this.is_massage=true
            this.is_password=false
            this.param.username = ""
            this.param.password = ""
            this.ys1 = !this.ys1
            this.ys2 = !this.ys2
        }
    },
};
</script>

<style scoped>
.EWM{
    height:8%;
    width:10%;
    float:right;
    background: url('../assets/');
    cursor:pointer;
}
/* div >>> .el-input > input{
    font-family: "幼圆";
    font-size: 27px;
    height: 50px;
    border-color:#008ce2;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    background:rgba(255, 255, 255, -0.7);
    background:transparent !important;

  } */
input.el-input__inner{
    background: transparent !important;
    height: 50px !important;
    font-size: 20px !important;
    font-family: "幼圆"  !important;
    border-color: #0078d7;
    color: white;
    border-width: 2px;

}
.el-input--small .el-input__icon{
    color: #0078d7 !important;
}
.password{
    border: 2px solid #0078d7;
    color: #0078d7;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor:pointer;
    line-height:80px;
}
.message{
    /* border: 2px solid #0078d7; */
    color: #ffffff;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor:pointer;
}
.wel1{
    background:rgba(255, 255, 255, -0.7);
    color: white;
    position: absolute;
    width: 100%;
    margin-top: 0px;
    left: 5%;
    font-family: "黑体";
    font-size: 40px;
}
.wel{
    text-align: left;
    padding-left: 40px;
    position: relative;
    width: 100%;
    height: 15%;
    left: 0%;
    /* margin-top: 50px; */
    font-family: "幼圆";
    font-size: 27px;
    color: "#0078d7";
}
.el-input__inner::-webkit-input-placeholder {
        color: #fff;
    }
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/imgs/home_img.jpg);
    background-size: 100% 100%;
}
.ms-title {
    background: rgba(255, 255, 255, 0.3);
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 30px;
    height: 100%;
    color: #fff;
}
.el-input-group>.el-input__inner{
    height:40px;
}
.box{
        font-size: 42px;
        font-family: "黑体";
        font-weight: 700;
        color:#fff;
        line-height: 100px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/
        position: relative;
        top:40%;
        margin-top: -50px;
        margin-left: 8px;
    }
.ms-login {
    position: absolute;
    left: 75%;
    top: 45%;
    width: 450px;
    height: 550px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    /* background: rgba(255, 255, 255, 0.3); */
    overflow: hidden;
}
.login{
    height: 540px;
    width: 50%;
    line-height: 50px;
    text-align: center;
    background-size: 100% 100%;
    background-color: #0078d7;
    opacity:0.8;
}
.ms-content {
    padding: 30px 40px;
    color: #515151;
}
.login-btn {
    position:relative;
    left:10%;
    text-align: center;
    height: 100%;
    width: 360px;
}
.login-btn button {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    font-family: "幼圆";
    font-size: 29px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
</style>
